import API from '@/services';
import {
  defineComponent,
  onMounted,
  PropType,
  reactive,
  toRaw,
  watch
} from 'vue';
import Table from '@/components/Table/index';
import * as RouteNames from '@/router/consts';
import { useRouter } from 'vue-router';
import { useStore } from '@/store/index';
import _ from 'lodash';
//指标库绑定模型表格业务组件
const BindmodelTable = defineComponent({
  name: 'BindmodelTable',
  props: {
    mId: {
      type: String as PropType<string>
    }
  },
  setup: (props) => {
    const store = useStore();
    const router = useRouter();
    const state = reactive({
      loading: false,
      tableData: [] as defs.BindModelVO[],
      total: 0,
      tableColumn: [
        {
          prop: 'id',
          label: '序号'
        },
        {
          prop: 'dimension',
          label: '支持维度',
          width: 180
        },
        {
          prop: 'modelName',
          label: '模型',
          width: 180
        },
        {
          prop: 'tableName',
          label: '表名'
        },
        {
          prop: 'option',
          label: '操作',
          width: 90,
          default: ({ row, $index }: any) => (
            <el-button
              type="text"
              onClick={(e: any) => {
                e.preventDefault();
                goIndexConfig(row);
              }}
            >
              去取数
            </el-button>
          )
        }
      ],
      getBindmodelList: async (id: any) => {
        if (id) {
          state.loading = true;
          const { code, data } = await API.metricsLibrary.getModelById({
            id: Number(id)
          });
          if (code === 200 && data) {
            state.tableData = data;
          }

          state.loading = false;
        }
      }
    });
    //去取数
    const goIndexConfig = (row: any) => {
      getModelDetail(row);
    };
    //保存模型信息
    const getModelDetail = async (row: any) => {
      const id = row.id;
      if (id) {
        const { data, code } = await API.taskManager.getModelDetailById({ id });
        if (code === 200) {
          const { metricsList, dimensionList } = data as any;

          const indexList = metricsList || [];

          const dimList = (dimensionList || []).map((it: any) => {
            const { relDimensionColumnVOList, ...rest } = it as any;
            return rest;
          });

          const detail = {
            indexList: _.cloneDeep(toRaw(indexList)),
            dimList: _.cloneDeep(toRaw(dimList)),
            rawDetail: { ..._.cloneDeep(toRaw(row)) }
          };
          store.commit('getnumber/setCurrentSelectDetail', detail);
          //跳转取数第二页
          router.push({
            //name: RouteNames.ROUTE_GETNUMBERFETCH
          });
        }
      }
    };
    onMounted(() => {
      state.getBindmodelList(props.mId);
    });
    watch(
      () => props.mId,
      (val: any) => {
        if (val) {
          state.getBindmodelList(val);
        }
      }
    );
    return () => {
      return (
        <Table
          v-loading={state.loading}
          data={state.tableData}
          column={state.tableColumn}
          pagination={{
            total: state.total
          }}
        />
      );
    };
  }
});

export default BindmodelTable;
